import React, {Component, useState} from 'react';


export default function App() {

    const [text, settext] = useState('')
    const [list, setlist] = useState(['aa', 'bb', 'cc'])

    const handlachange = (event) => {
        settext(event.target.value)
    }

    const handleAdd = () => {
        if(text){
            setlist([...list,text])
            settext('')
        }
    }

    const handledel = (index) => {
        var newlist=[...list]
        newlist.splice(index,1)
        setlist(newlist)
    }
    return (
        <div>
            <input type="text" onChange={handlachange} value={text}/>
            <button onClick={handleAdd}>add</button>
            <ul>
                {
                    list.map((item,index) =>
                        <li key={index}>{item}
                        <button onClick={()=>{
                            handledel(index)
                        }}>delete</button>
                        </li>
                    )
                }
            </ul>
            {
                list.length==0 && <div>空!</div>
            }

        </div>
    );
}
